<template>
  <div class="layout">
    <!-- 导航头（始终显示） -->
    <NavHeader />
    <!-- 动态内容区域 -->
    <main class="content">
      <!-- 使用 Element 响应式栅格 -->
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <router-view></router-view>
          <Footer v-if="showFooterr" @click="handleFooterClick" />
        </el-col>
      </el-row>
    </main>
    <!-- 其他全局组件（如页脚） -->
  </div>
</template>

<script setup>
import NavHeader from "../components/NavHeader.vue";
import Footer from "@/components/float/FloatView.vue";
import {useRouter} from "vue-router";
import { ref } from "vue";
const showFooterr = ref(true); // 控制页脚显示
const router  = useRouter();
const handleFooterClick = () => {
  router.push({path: "/layout/aiCommunication"});
};
</script>

<style scoped>
.layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  width: 92%;
  max-width: 1600px;
  min-width: 300px;
  margin: 20px auto;
  margin-top: 80px; /* 为固定导航栏留出空间 */
  padding: 0 2%;
  overflow-x: hidden;
  /* 防止横向滚动 */

  /* 移动端优化 */
  @media (max-width: 768px) {
    width: 96%;
    padding: 0 3%;
    margin-top: 15px;

    /* 适配移动端滚动 */
    -webkit-overflow-scrolling: touch;
  }

  /* 平板优化 */
  @media (min-width: 769px) and (max-width: 1024px) {
    width: 90%;
    padding: 0 5%;
  }

  /* 小屏PC优化 */
  @media (min-width: 1025px) and (max-width: 1280px) {
    width: 88%;
    padding: 0 6%;
  }
}

/* 移动端触摸优化 */
@media (hover: none) {
  .content {
    padding-bottom: env(safe-area-inset-bottom);
    /* 适配全面屏底部 */
  }
}
</style>
